<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sysUser</title>

    <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css" />

    <script src="/webjars/vue/2.1.3/vue.js"></script>
</head>
<body>



<div class="container-fluid"  id="sysUserApp">
    <div class="row">
        <div class="col-md-12">
            <div class="btn-group" role="group">

                <button class="btn btn-primary" type="button">
                    Left
                </button>
                <button class="btn btn-primary" type="button">
                    Center
                </button>
                <button class="btn btn-primary" type="button">
                    Right
                </button>
                <button class="btn btn-primary" type="button">
                    Justify
                </button>
            </div>

            <table class="table table-hover table-striped table-bordered table-sm">
                <thead class="">
                <tr>
                    <th><input type="checkbox"></th>
                    <th>序号</th>
                    <th>会员号</th>
                    <th>姓名</th>
                    <th>手机号</th>
                    <th>办公电话</th>
                    <th>邮箱地址</th>
                    <th>状态</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(user,index) in sysUserList">
                    <td><input type="checkbox" :value="index" v-model="checkedRows"></td>
                    <td>{{pageNow*10 + index+1}}</td>
                    <td>{{user.id}}</td>
                    <td>{{user.username}}</td>
                    <td>{{user.mobile}}</td>
                    <td>{{user.officetel}}</td>
                    <td>{{user.email}}</td>
                    <td v-if="user.disenable == 0">正常</td>
                    <td v-else>注销</td>
                </tr>
                </tbody>
            </table>


            <div class="row" id="pageApp" v-if="totalPages>0">
                <div class="col-md-12">
                    <nav>

                        <ul class="pagination pagination-sm">
                            <li class="page-item">
                                <a class="page-link" href="#"><i @click="goToNavOne(1)">&laquo;</i></a>
                            </li>
                            <li class="page-item">
                                <a href="#" class="page-link"><i  @click="switchToPage(pageNow-1)">&lt;</i></a>
                            </li>


                            <li class="page-item" v-for="n in numArr" :class="{active:n==pageNow}">
                                <a href="#" @click="switchToPage(n)" class="page-link">{{n}}</a>
                            </li>


                            <li class="page-item">
                                <a href="#" class="page-link"><i  @click="switchToPage(pageNow+1)">&gt;</i></a>
                            </li>
                            <li class="page-item">
                                <a href="#" class="page-link"><i  @click="goToNavLast(totalPages)">&raquo;</i></a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>


<script>

    var vm = new Vue({
        el: '#pageApp',
        data: {
            totalPages:0,
            pageNow:1,
            numArr:[1,2,3,4,5],
            navNum:5,
            sysUserList:[],


        },
        methods: {

            switchToPage:function (indx) {

                if(indx<1){
                    indx=1;
                }
                if(indx>this.totalPages){
                    indx=this.totalPages;
                }


                this.pageNow=indx;


                //上一页
                if(indx<this.numArr[0]){
                    this.numArr=[];
                    var first=indx-this.navNum+1;
                    for(var i=0;i<this.navNum;i++){
                        this.numArr.push(first+i);
                    }
                }


                //下一页
                var length = this.numArr.length;
                var maxIndx = this.numArr[length-1];
                if(indx>maxIndx){

                    this.numArr=[];
                    var size=maxIndx+this.navNum;
                    if(size>this.totalPages){
                        size=this.totalPages;
                    }

                    for(var i=maxIndx+1;i<=size;i++){
                        this.numArr.push(i);
                    }
                }


                this.getDataList(indx);

            },

            goToNavOne:function (num) {

                var size=this.navNum;

                var flag=false;

                if(this.totalPages<this.navNum){

                    size=this.totalPages;
                }


                this.numArr=[];

                for(var i=1;i<=size;i++){
                    this.numArr.push(i);
                }

                this.switchToPage(1);


            },
            goToNavLast:function (num) {


                var n=this.totalPages%this.navNum;

                this.numArr=[];

                for(var i=this.totalPages-n+1;i<=this.totalPages;i++){
                    this.numArr.push(i);
                }

                this.switchToPage(this.totalPages);


            },

            downFile: function (fileName) {

                window.open('/file/downFile/' + fileName);
            },

            getDataList: function (page) {

                var _self = this;

                $.ajax({
                    url:'/sysUser/pageInfo?current='+1 +'&size='+10,

                }).done(
                    function (dat) {

                        console.log(dat);
                        if (dat.code == 0) {

                            var data = dat.data;
                            _self.sysUserList=data.records;
                            _self.totalPages= 1;
//                            for (var indx in fnameList) {
////                                vm.fileList.push(fnameList[indx]);
//                                _self.fileList.push(fnameList[indx]);
//                            }

                        }
                    }
                );
            }
        },
        mounted: function () {



            this.switchToPage(1);
        }
    });

</script>